{% extends 'base.html' %}
{% block css %}
  #eva{
    margin-top:20px;
    position:absolute;
    right:50px;
  }
  #eva img{
    width:26px;
    margin:0 8px;
    cursor:pointer;
  }
  #r-chart{
    width:560px;
    height:320px;
  }
{% endblock %}
{% block content %}
  <div class="alert alert-warning" role="alert" style="display:none" id="loading-tip">
    <div class="spinner-border text-warning spinner-border-sm" role="status">
    </div>
    <span style="margin-left:10px">正在回答中...</span>
  </div>
  <div class="alert alert-danger" role="alert" style="display:none" id="answer-tip">
    <span style="margin-left:10px" id="answer-tip-content"></span>
  </div>
  <div class="row">
    <textarea class="form-control" placeholder="请输入问题" rows="5" maxlength="148" style="width:98%;margin:0 10px" id="question"></textarea>
    <div class="mt-3">
      <button class="btn btn-success" type="button" id="askBtn" style="margin-bottom:15px">
        提问
      </button>
    </div>
    <div class="row">
      <div class="col-md-6 grid-margin " id="answer" style="display:none;">
        <div class="card" style="height:400px;">
          <div class="card-body">
            <p class="card-title" id="question-type" style="color:#71c016;font-size:16px">答案</p>
            <p id="answer-content"></p>
            <div id="eva"><img src="../static/images/未赞.png" class="feedback" id="good1"><img src="../static/images/已赞.png" class="feedback" id="good2" style="display:none;"><img src="../static/images/未踩.png" class="feedback" id="bad1"><img src="../static/images/已踩.png" class="feedback" id="bad2" style="display:none;"></div>
          </div>
        </div>
      </div>
      <div class="col-md-6 grid-margin " id="kg" style="display:none;">
        <div class="card" style="height:400px;">
          <div class="card-body">
            <p class="card-title" style="color:#71c016;font-size:16px">知识图谱</p>
            <div id="r-chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block js %}
  $(function(){
    question='';
    time='';
    $('#QA_Module i').css('color','#71c016');
    $('#QA_Module span').css('color','#71c016');
    $('#question').val('');
  })
  $('#askBtn').click(function(){
    username=localStorage.getItem('username');
    question=$('#question').val();
    text='';
    if(question==''){
      text="请输入问题！";
      $('#answer-tip').css('display','block');
      $('#answer-tip').addClass('show');
      $('#answer-tip-content').html(text);
      setTimeout(function (){
        $('#answer-tip').css('display','none');
        $('#answer-tip').removeClass('show');
      }, 3000);
    }
    else if(!/^[\u4E00-\u9FA5]+$/.test(question)){
      text="问题仅支持中文！";
      $('#answer-tip').css('display','block');
      $('#answer-tip').addClass('show');
      $('#answer-tip-content').html(text);
      setTimeout(function (){
        $('#answer-tip').css('display','none');
        $('#answer-tip').removeClass('show');
      }, 3000);
    }
    else{
      $('#misunderstand-tip').css('display','none');
      $('#misunderstand-tip').removeClass('show');
      $('#loading-tip').css('display','block');
      $('#loading-tip').addClass('show');
      $.ajax({
        type:"POST",
        url:"/qa",
        data:{'username':username,'question':question},
        success:function(re){
          re=JSON.parse(re);
          type_num=re.type_num;
          entity=re.entity;
          if(re.msg==1){
            $('#bad1').css('display','inline-block');
            $('#bad2').css('display','none');
            $('#good1').css('display','inline-block');
            $('#good2').css('display','none');
            $.ajax({
              type:"POST",
              url:"/charts",
              data:{'type_num':type_num,'entity':entity,'chart':'r'},
              success:function(graph){
                $('#loading-tip').css('display','none');
                $('#loading-tip').removeClass('show');
                graph=JSON.parse(graph);
                if(re.msg==1){
                  var myChart = echarts.init(document.getElementById('r-chart'));
                  option = {
                    // 提示框的配置
                    tooltip: {
                      extraCssText: 'max-width:80%;overflow:scroll',//最大宽度以及超出处理
                      enterable:true,//鼠标可以进入tooltip区域，使用滚动条
                      formatter: function (x) {
                        str=''
                        if(x.data.type=='bean'){
                          str = `ID：${x.data.id}<br/>
                            中文名：${x.data.name}<br/>`
                        }
                        else if(x.data.type=='disease'){
                          str = `ID：${x.data.id}<br/>
                            中文名：${x.data.name}<br/>
                            英文名：${x.data.EN}<br/>
                            别名：${x.data.AN}<br/>
                            简介：${x.data.Brief}<br/>
                            为害症状：${x.data.Symptom}<br/>
                            发生因素：${x.data.Reason}<br/>
                            防治方法：${x.data.Method}<br/>`
                        }
                        else if(x.data.type=='insect'){
                          str = `ID：${x.data.id}<br/>
                            中文名：${x.data.name}<br/>
                            英文名：${x.data.EN}<br/>
                            别名：${x.data.AN}<br/>
                            简介：${x.data.Brief}<br/>
                            为害症状：${x.data.Symptom}<br/>
                            形态特征：${x.data.Feature}<br/>
                            生活习性：${x.data.Lifestyle}<br/>
                            发生因素：${x.data.Reason}<br/>
                            防治方法：${x.data.Method}<br/>`
                        }
                        else if(x.data.type=='pathongen'){
                          str = `ID：${x.data.id}<br/>
                            中文名：${x.data.name}<br/>
                            英文名：${x.data.EN}<br/>
                            别名：${x.data.AN}<br/>
                            缩写：${x.data.ABBR}<br/>
                            侵染循环：${x.data.Infect}<br/>`
                        }
                        else if(x.data.type=='edge'){
                          str = `关系名：${x.data.name}<br/>`
                        }
                          return str;
                        }
                      },
                      // 工具箱
                      toolbox: {
                        // 显示工具箱
                        show: true,
                        feature: {
                          mark: {
                            show: true
                          },
                          // 还原
                          restore: {
                            show: true
                          },
                          // 保存为图片
                          saveAsImage: {
                            show: true
                          }
                        }
                      },
                      legend: [{
                        data: graph.data.categories.map(function (a) {
                          return a.name;
                        })
                      }],
                      color:['#9fe080','#ffdc60','#7ed3f4','#ff915a'],
                      series: [{
                        type: 'graph', // 类型:关系图
                        layout: 'force', //图的布局，类型为力导图
                        symbolSize: 40, // 调整节点的大小
                        roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [2, 10],
                        edgeLabel: {
                          normal: {
                            textStyle: {
                              fontSize: 20
                            }
                          }
                        },
                        force: {
                          repulsion: 2500,
                          edgeLength: [10, 50]
                        },
                        draggable: true,
                        lineStyle: {
                          color: 'source',
                          curveness: 0.3
                        },
                        emphasis: {
                          focus: 'adjacency',
                          lineStyle: {
                            width: 5
                          }
                        },
                        edgeLabel: {
                          normal: {
                            show: true,
                              formatter: function (x) {
                                return x.data.name;
                            }
                          }
                        },
                        label: {
                          normal: {
                            show: true,
                            textStyle: {}
                          }
                        },
                        // 数据
                        data: graph.data.nodes,
                        links: graph.data.links,
                        categories: graph.data.categories,
                      }]
                    };
                  myChart.setOption(option);
                  $('#answer').css('display','inline-block');
                  $('#kg').css('display','inline-block');
                  $('#answer-content').html(re.answer);
                  $('#question-type').html(re.type);
                  time=re.time;
                }
              }
            })
          }else{
            $('#loading-tip').css('display','none');
            $('#loading-tip').removeClass('show');
            if(re.msg==0)
              text='对不起，系统没有理解您的问题，请再次询问！';
            else if(re.msg==-1)
              text='对不起，系统暂未包含此方面数据！';
            $('#answer-tip').css('display','block');
            $('#answer-tip').addClass('show');
            $('#answer-tip-content').html(text);
            setTimeout(function (){
              $('#answer-tip').css('display','none');
              $('#answer-tip').removeClass('show');
            }, 3000);
          }
        }
      })
    }
  })
  $('#good1').click(function(){
    $(this).css('display','none');
    $('#good2').css('display','inline-block');
    $('#bad1').css('display','inline-block');
    $('#bad2').css('display','none');
  })
  $('#good2').click(function(){
    $(this).css('display','none');
    $('#good1').css('display','inline-block');
  })
  $('#bad1').click(function(){
    $(this).css('display','none');
    $('#bad2').css('display','inline-block');
    $('#good1').css('display','inline-block');
    $('#good2').css('display','none');
  })
  $('#bad2').click(function(){
    $(this).css('display','none');
    $('#bad1').css('display','inline-block');
  })
  $('.feedback').click(function(){
    flag=0;
    text='感谢反馈！';
    if($(this).prop('id')=='good1')
      flag=1;
    else if($(this).prop('id')=='bad1')
      flag=-1;
    else if($(this).prop('id')=='good2')
      text='取消点赞';
    else if($(this).prop('id')=='bad2')
      text='取消不喜欢';
    $.ajax({
      type:"POST",
      url:"/feedback",
      data:{'username':username,'question':question,'time':time,'flag':flag},
      success:function(re){
        re=JSON.parse(re);
        if(re.msg==1){
          $('#liveToast').removeClass('hide');
          $('#liveToast').addClass('show');
          $('#toastText').html(text);
          setTimeout(function (){
            $('#liveToast').addClass('hide');
            $('#liveToast').removeClass('show');
          }, 3000);
        }
      }
    })
  })
{% endblock %}
